<template>
  <view class="">
    <view class="tabs flex bg-white hair--b">
      <view v-for="(item, i) in tabs" :key="i" class="flex-1 flex-ca">
        <view class="tab" :class="avtive === i ? 'tab-active' : ''" @click="avtive = i">{{ item }}</view>
      </view>
    </view>
    <goods-list v-if="avtive === 0" ref="goodsBrowseRef" :time-label="timeLabel" :api="api" :param="{type: 1}" />
    <file-list v-if="avtive === 1" ref="fileBrowseRef" :time-label="timeLabel" :api="api" :param="{type: 2}" />
  </view>
</template>

<script>
import FileList from '@/components/User/FileList.vue'
import GoodsList from '@/components/User/GoodsList.vue'
export default {
  components: {
    FileList,
    GoodsList
  },
  data() {
    return {
      timeLabel: '浏览时间',
      api: 'api/userBrowse',
      tabs: ['浏览商品', '浏览文档'],
      avtive: 0
    }
  },
  watch: {
    avtive: {
      handler() {
        this.getList()
      },
      immediate: true
    }
  },
  onReachBottom() {
    this.getList()
  },
  methods: {
    getList() {
      this.$nextTick(function() {
        const refKey = ['goodsBrowseRef', 'fileBrowseRef'][this.avtive]
        this.$refs[refKey].getList()
      })
    }
  }
}
</script>
<style lang="scss">
	.tabs {
		position: sticky;
		top: 0;
		z-index: 99;
	}
	
	.tab {
		height: 90rpx;
		line-height: 90rpx;
		padding: 0 10rpx;
		font-size: 30rpx;
		border-bottom: 6rpx solid transparent;
		box-sizing: border-box;
	}

	.tab-active {
		font-weight: 600;
		color: $uni-primary;
		border-bottom-color: $uni-primary;
	}
</style>
